<template>
    <card class="selected-tag-box">
        <div class="city-box">
            <div class="tag-title">
                <label>已选<span class="title-bold">{{ cityList.length }}</span>地点</label>
                <template v-if="cityList.length > showMun">
                    <label class="toggle-label" @click="toggleShow">{{ isFold ? '展示全部' : '收起' }}</label>
                </template>
            </div>
            <div class="city-list">
                <div v-for="(item, index) in getCitys" :key="index" class="city-item">
                    <tag :name="item[cityLabel].toString()" @del="deleteTag(index)"></tag>
                </div>
            </div>
        </div>
    </card>
</template>

<script lang="ts" setup>
import Card from '@/components/Card/index.vue';
import tag from '@/components/tag.vue';
import { Toast } from 'vant';
import { ref, toRefs, computed } from 'vue';

interface cityModel {
    [key: string]: number | string,
}

export interface Props {
    citys: cityModel[];
    cityLabel?: string;
    cityCode?: string;
}
const props = withDefaults(defineProps<Props>(), {
    cityLabel: 'title',
    cityCode: 'title',
});

const { citys } = toRefs(props);
const cityList = ref<cityModel[]>([]);
cityList.value = citys.value;
const showMun = 10;
// 数据是否折叠
const isFold = ref<boolean>(true);
function toggleShow() {
    isFold.value = !isFold.value;
}

const getCitys = computed(() => {
    if(isFold.value) {
        return cityList.value.slice(0, showMun);
    }
    return cityList.value;
});
const emit = defineEmits(['changeCity']);
function deleteTag(index: number) {
    if(cityList.value.length < 2) {
        return Toast.fail('不能删除最后一个');
    }
    cityList.value.splice(index, 1);
    emit('changeCity', cityList.value);
}
defineExpose({ cityList});
</script>

<style scoped lang="scss">
.selected-tag-box {
    .city-box {
        .tag-title {
            padding-bottom: 16px;
            display: flex;
            justify-content: space-between;
            font-weight: 600;
            font-size: 16px;
            color: #333333;
            .title-bold {
                color: #e60044;
            }
            .toggle-label {
                font-weight: 400;
                font-size: 13px;
                color: #397ff8;
            }
        }
        .city-list {
            .city-item {
                display: inline-block;
            }
        }

        // border-bottom: 0.5px solid #eeeeee;
    }
}
</style>
